<template>
  <div class="menu">
    <nav>
      <ul>
        <div
          v-for="(item, index) in menus"
          :key="index"
          @mouseover="mouseover(index)"
          @mouseout="mouseout(index)"
        >
          <li>
            <a href="#">{{ item.firstNav }}</a>
          </li>
          <ul v-show="active === index">
            <li v-for="ele in item.secondNav" :key="ele.id">
              <a href="#">{{ ele.name }}</a>
            </li>
          </ul>
        </div>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: null,
      menus: [
        {
          firstNav: "导航一",
          secondNav: [
            { name: "一级导航", id: 1 },
            { name: "二级导航", id: 2 },
            { name: "三级导航", id: 3 },
            { name: "四级导航", id: 4 },
          ],
        },
        {
          firstNav: "导航二",
          secondNav: [
            { name: "一级导航", id: 5 },
            { name: "二级导航", id: 6 },
            { name: "三级导航", id: 7 },
          ],
        },
      ],
    };
  },
  methods: {
    mouseover(index) {
      this.active = index;
    },
    mouseout() {
      this.active = null;
    },
  },
};
</script>

<style scoped>
nav {
  margin: auto;
  text-align: center;
}
nav ul {
  background: linear-gradient(to bottom, #efefef, #bbb);
  display: flex;
  position: relative;
  box-shadow: 1px 1px 3px #666;
  list-style: none;
}
nav ul div {
  position: relative;
  padding: 0 20px;
}
nav ul ul {
  display: block;
  position: absolute;
  left: 15px;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #000;
  text-decoration: none;
  font-family: "微软雅黑";
}
nav ul li:hover {
  background: linear-gradient(to bottom, #4f5964, #5f6975);
}
nav ul li:hover a {
  color: #fff;
}
nav ul > ul {
  background: #5f6975;
  border-radius: 0;
  position: absolute;
  top: 100%;
  padding: 0;
  left: 15px;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
}
nav ul ul li a {
  color: #000;
}
nav ul ul li a:hover {
  background: #4b545f;
}
</style>
